<template>
<!--  在vue3中不用在加外层的容器标签了-->
<!--  用了ref函数 模板中不用调用.value vue会自动帮你调用-->
  <h3>我的名字:{{person.name}}</h3>
  <h3>我的年龄:{{person.age}}</h3>
  <h3>我的工作:{{person.job.name}}</h3>
  <h3>我的薪水:{{person.job.salary}}</h3>
  <button @click="sayHello">自我介绍</button>
  <button @click="changeNameAndAge">点我修改信息</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup() {
    // 用reactive初始化的数据对象(只能是对象类型) 可以直接.属性名访问 可以深层访问
    let person = reactive({
      name:'张三',
      age:18,
      gender:'男',
      job:{
        name:'前端工程师',
        salary:80000
      }
    })
    //定义函数
    function sayHello() {
      alert(`大家好 我是${person.name}，我今年${person.age}岁`)
    }
    function changeNameAndAge() {
      person.age = 40;
      person.name = '李四';
    }
    return {
      person,
      changeNameAndAge,
      sayHello
    }
  }
}
</script>

<style>

</style>
